<template>
    <div class="playController">
        <div  class="left" @click="setIsShow(true)" >
            <img :src="playlist[playCurrentIndex].al.picUrl" alt="">
            <div class="content">
                <div class="title">{{playlist[playCurrentIndex].name}}</div>
                <div class="tips">横划可以切换上下首</div>
            </div>
        </div>
        <div class="right">
            <svg  v-if="!playing" class="icon" aria-hidden="true" @click="play()">
                <use xlink:href="#icon-bofang3"></use>
            </svg>
            <svg v-else class="icon" aria-hidden="true" @click="play()">
                <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg class="icon" aria-hidden="true" @click="liebiao()">
                <use xlink:href="#icon-liebiao2"></use>
            </svg>
        </div>
    </div>
    <playMusic v-show="isShow" :liebiao="liebiao" ref="plays"></playMusic>
    <lieBiao  v-if="isLieBiao" :liebiao="liebiao"></lieBiao>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import lieBiao from '@/components/playController/lieBiao.vue'
import playMusic from '@/components/playController/playMusic.vue'
export default {
  components: {
    lieBiao, playMusic
  },
  computed: {
    ...mapState(['playlist', 'playCurrentIndex', 'isShow', 'playing'])

  },
  data () {
    return {
      isLieBiao: false
    }
  },
  mounted () {
  },
  methods: {
    ...mapMutations(['setIsShow']),
    liebiao () {
      this.isLieBiao = !this.isLieBiao
    },
    play () {
      this.$refs.plays.play()
    },
    unique () {
      console.log(this.playlist[this.playCurrentIndex].id)
      const arr = this.playlist
      const res = new Map()
      const playlists = arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
      if (this.playlist.length !== playlists.length) {
        const chongFu = this.playlist[this.playlist.length - 1]
        var index = playlists.indexOf(chongFu)
        if (index === -1) {
          index = 0
          console.log(index)
        }
        console.log(playlists)
        console.log(index)
        this.$store.commit('upPlaylist', playlists)
        this.$store.commit('setPlayIndex', index)
      }
    }
  },
  watch: {
    'playlist.length' () {
      this.unique()
      this.play()
    }
  }

}
</script>
<style lang="less" scoped>
.playController{
    width: 7.5rem;
    height: 1.2rem;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    border-top: 1px solid #ccc;
    .left{
        display: flex;
        padding: 0 0.4rem;
        img{
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 0.4rem;
        }
        .content{
            padding: 0 0.2rem;
            .title{
                font-weight: 900;
                width: 3.5rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .tips{
                font-size: 0.15rem;
                color: #999;
            }
        }
    }
    .right{
        .icon{
            width: 0.4rem;
            height: 0.4rem;
            margin: 0 0.3rem;
        }
    }
}
</style>
